import Base from "../base.js"
import seatsApi from "../../api/seats.js"
import theatersApi from "../../api/theaters.js";
export default class extends Base {
    constructor(props) {
        super(props);
        this.data = {
            seats: {
                displayName:"9排9列",
                theaterId: props._id 
            }
        }
    }
    render() {
        const { displayName,theaterId } = this.data.seats;
        this.$el.html(`
        <div>
        <h1  style="margin-left:120px;margin-bottom:20px;">新增座位</h1>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">座位方位</label>
                <div class="layui-input-block">
                <input type="text" name="row" lay-verify="title" autocomplete="off" value="${displayName}" class="layui-input"  style="width:200px;">
                </div>
            </div> 
            <div class="layui-form-item" style="width:300px" >
                <label class="layui-form-label" >座位所从属的放映厅</label>
                <div class="layui-input-block">
                <input disabled type="text" name="theaterId" lay-verify="title" autocomplete="off" value="${theaterId}"  class="layui-input"  style="width:200px;">
                </div>
            </div>
            <label class="layui-form-label"></label>
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>    
      </form> 
      </div>
`)
        this.form = layui.form;
        this.form.render();
        // this.theaterIdEle = $(`input[name=_id]`);
    }
    async add(data) {
        this.data.seats.theaterId = await seatsApi.add(data);
    }
    handle() {
        this.form.on('submit(demo1)', (data) => {
            console.log(data.field);
            this.add(data.field)
            return false;
        });
    }
    async mounted() {
        // this.getTheater()
    }
}